<template>
    <app-layout title="订单" btnType="unset">
        <view class="select-group">
            <view
                class="select-item"
                v-for="(selectItem, selectIndex) in tabList"
                :key="selectIndex"
                :class="{ active: tabIndex == selectIndex }"
                @click="tabIndex = selectIndex"
            >
                <text class="text">{{ selectItem.name }}</text>
            </view>
        </view>
        <view class="order-list-group">
            <swiper
                class="list-tab-list"
                :current="tabIndex"
                :duration="300"
                @change="switchTab($event.detail.current)"
                :style="{ minHeight: '75vh', height: tabHeight + 'px' }"
            >
                <block v-for="(tabItem, tabIdx) in tabList" :key="tabIdx">
                    <swiper-item>
                        <view class="tab-item" :class="['tab' + tabIdx]">
                            <view class="order-list">
                                <view
                                    class="order-item"
                                    v-for="(item, index) in tabItem.list"
                                    :key="index"
                                    @click="toDetail(item.id, item.state, item.listType, item.orderType)"
                                >
                                    <order-item :order="item" :index="index" @changeTime="changeTime(item)">
                                        <view class="action-group">
                                            <view class="price">
                                                <block v-if="item.listType == 't1' || item.listType == 't3'">
                                                    <text>¥ {{ item.price }}</text>
                                                </block>
                                            </view>
                                            <order-action :order="item" @refresh="refresh" />
                                        </view>
                                    </order-item>
                                </view>
                            </view>
                            <view class="more-list">
                                <widget-load-more :hasMore="tabItem.more" @loadmore="loadData" />
                            </view>
                        </view>
                    </swiper-item>
                </block>
            </swiper>
        </view>
        <app-order-change-time
            v-show="changeTimeData.changeTimeModal"
            :orderId="changeTimeData.data.orderId"
            @close="changeTimeData.changeTimeModal = false"
            @submit="submit"
        />
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import OrderItem from "@/components/order/item";
import OrderAction from "@/components/order/action";
import WidgetLoadMore from "@/components/widgets/loadmore";
import AppOrderChangeTime from "@/components/order/change-time";
import { mapState } from "vuex";
export default {
    name: "order",
    data() {
        return {
            tabIndex: 0,
            tabHeight: 0,
            changeTimeData: {
                changeTimeModal: false,
                data: {},
            },
            tabList: [
                {
                    listType: "t1",
                    name: "全部订单",
                    page: 1,
                    more: true,
                    list: [],
                },
                {
                    listType: "t2",
                    name: "报/议价订单",
                    page: 1,
                    more: true,
                    list: [],
                },
                {
                    listType: "t3",
                    name: "货运订单",
                    page: 1,
                    more: true,
                    list: [],
                },
            ],
        };
    },
    components: {
        AppLayout,
        OrderItem,
        OrderAction,
        WidgetLoadMore,
        AppOrderChangeTime,
    },
    computed: {
        ...mapState({
            currentOrderTabIndex: (state) => state.system.currentOrderTabIndex,
            refreshOrder: (state) => state.system.refreshOrder,
        }),
    },
    onLoad() {},
    onShow() {
        if (this.refreshOrder && this.currentOrderTabIndex == this.tabIndex) {
            this.switchTab(this.tabIndex);
        }
        if (this.currentOrderTabIndex != this.tabIndex) {
            // #ifdef H5
            setTimeout(() => {
                this.tabIndex = this.currentOrderTabIndex;
            }, 10);
            // #endif
            // #ifndef H5
            this.tabIndex = this.currentOrderTabIndex;
            // #endif
        }
    },
    onReady() {},
    onHide() {},
    onReachBottom() {
        this.loadData();
    },
    onPullDownRefresh() {
        this.switchTab(this.tabIndex);
        uni.stopPullDownRefresh();
    },
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        /**
         * 切换tab页
         */
        switchTab(index) {
            this.$store.commit("system/refreshOrder", false);
            this.$store.commit("system/currentOrderTabIndex", index);
            this.tabIndex = index;
            let currentTab = this.tabList[index];
            currentTab.page = 1;
            currentTab.more = true;
            currentTab.list = [];
            uni.pageScrollTo({
                scrollTop: 0,
                duration: 0,
            });
            this.loadData();
        },
        /**
         * 动态设置页面高度
         */
        setTabHeight() {
            let element = ".tab" + this.tabIndex;
            let query = uni.createSelectorQuery().in(this);
            query.select(element).boundingClientRect();
            query.exec((res) => {
                if (res && res[0]) {
                    this.tabHeight = res[0].height;
                }
            });
        },
        /**
         * 加载列表数据
         */
        loadData() {
            let currentTab = this.tabList[this.tabIndex];
            return new Promise((resolve, reject) => {
                if (!currentTab.more) {
                    return;
                }
                this.$models.order
                    .orderList({
                        request: {
                            api: "order.list." + currentTab.listType,
                            data: {
                                page: currentTab.page,
                                status: currentTab.status,
                            },
                        },
                        listType: currentTab.listType,
                    })
                    .then((orderList) => {
                        if (orderList.length == 0) {
                            currentTab.more = false;
                        } else {
                            currentTab.page++;
                            currentTab.list = currentTab.list.concat(orderList);
                        }
                        this.$nextTick(() => {
                            this.setTabHeight();
                        });
                        return resolve();
                    });
            });
        },
        /**
         * 跳转详情
         */
        toDetail(id, state, listType, orderType) {
            let tab = "detail";
            // 报价订单未选择师傅 跳转后切换到师傅列表
            if (listType == "t2" && orderType == 2 && state == 0) {
                tab = "worker";
            }
            this.$utils.toPage("/pages/order/detail?list=" + listType + "&tab=" + tab + "&id=" + id);
        },
        /**
         * 重新加载
         */
        refresh() {
            this.switchTab(this.tabIndex);
        },
        /**
         * 修改服务时间
         */
        changeTime(item) {
            this.changeTimeData.data = item;
            this.changeTimeData.changeTimeModal = true;
        },
        /**
         * 提交修改
         */
        submit(data) {
            if (!data.date || !data.time) {
                return this.$utils.toast("请选择日期和时间");
            }
            let currentTab = this.tabList[this.tabIndex];
            let datetime = data.date + " " + data.time;
            this.$models.order
                .changeServiceTime({
                    request: {
                        api: "order.changeServiceTime." + currentTab.listType,
                        data: {
                            id: this.changeTimeData.data.id,
                            times: datetime,
                        },
                    },
                })
                .then(() => {
                    this.changeTimeData.data.serviceTime = datetime;
                    this.changeTimeData.changeTimeModal = false;
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.select-group {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    margin-bottom: 20rpx;
    .select-item {
        width: 210rpx;
        height: 115rpx;
        box-sizing: border-box;
        text-align: center;
        .text {
            font-size: 30rpx;
            color: #999999;
            line-height: 115rpx;
        }
    }
    .select-item.active {
        border-bottom: 7rpx solid #8b9aeb;
        .text {
            font-weight: bold;
            color: #8b9aeb;
        }
    }
}
.order-list-group {
    width: 100%;
    .list-tab-list {
        width: 100%;
    }
    .more-list {
        width: 100%;
        padding: 50rpx 0;
    }
    .order-item {
        width: 100%;
        margin-bottom: 30rpx;
    }
    .order-item:last-child {
        margin-bottom: 0;
    }
    .action-group {
        width: 100%;
        padding: 30rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .price {
        width: 250rpx;
        font-size: 42rpx;
        font-weight: bold;
        color: #ec7655;
        line-height: 42rpx;
        flex-shrink: 0;
    }
}
</style>